/**
 * Created by Kimi on 2017/5/11.
 */

import React, {Component, PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Navigator,
    NavigatorIOS,
    NativeAppEventEmitter,

} from 'react-native';

class NavigationBar extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {

        let NavigationBar = [];

        var leftImgName = '';
        var title = '';

        // 左边图片按钮
        if (this.props.leftIcon == undefined) {
            leftImgName = 'ic-return-back'
        } else {
            leftImgName = this.props.leftIcon
        }

        NavigationBar.push(
            <TouchableOpacity
                key={'leftIcon'}
                activeOpacity={0.3}
                onPress={this.props.leftIconAction}>

                <View style={styles.navLeftView}>
                    <Image
                        source={ {uri: leftImgName}}
                        style={styles.navLeftImg}
                        resizeMode="contain"
                    />
                </View>

            </TouchableOpacity>
        );

        // 标题
        if (this.props.title == undefined) {
            //没有设置
            title = '默认标题'
        } else {
            title = this.props.title
        }

        NavigationBar.push(
            <Text key={'title'}
                  style={styles.navTitle}>
                { title }
            </Text>
        );

        // 右边图片按钮
        var rightImgName = '';
        if (this.props.rightIcon == undefined) {
            rightImgName = ''
        } else {
            rightImgName = this.props.rightIcon
        }


        if (this.props.rightIcon != undefined) {

            NavigationBar.push(
                <TouchableOpacity
                    key={'rightIcon'}
                    activeOpacity={0.3}
                    onPress={this.props.rightIconAction}>

                    <Image
                        source={ {uri: rightImgName}}
                        style={styles.navRightImg}
                        resizeMode="contain"
                    />

                </TouchableOpacity>
            )
        } else {

            //为了让中间标题居中,填充上右侧view
            NavigationBar.push(
                <View style={styles.navRightImg}
                      key={'rightView'}
                >
                </View>
            )
        }

        return (
            <View style={styles.containerView}>
                {NavigationBar}
            </View>
        );
    }
}

const styles = StyleSheet.create({

    containerView: {
        flexDirection: 'row',
        marginTop: 0,
        height: 64,
        paddingTop: 20,
        alignItems: 'center',
        borderBottomColor: '#C0C0C0', //银白色
        borderBottomWidth: 1,
        backgroundColor: 'white'
    },

    // 导航栏左侧图片底部view, 增大可点击范围
    navLeftView: {
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 5,
        width: 35,
        height: 35,
        backgroundColor: 'white'
    },

    //导航栏左侧图片
    navLeftImg: {
        width: 11,
        height: 20,
    },

    //导航栏中间标题
    navTitle: {
        fontSize: 20,
        color: 'rgb(94, 200, 250)',
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1
    },

    //导航栏右侧图片
    navRightImg: {
        width: 20,
        height: 24,
        marginRight: 13,
    },
});

module.exports = NavigationBar;